define(["Underscore", "Backbone"], function(_, Backbone) {

	var template = "<a href=\"<%= value.get(\"href\") %>\"><%= value.get(\"label\") %></a>";

	return Backbone.View.extend({
		tagName: "li",
		className: "menuItem",

		initialize: function() {
			console.log("MenuItemView - Initialize");

			this.template = _.template(template);
			this.model.on("change", this.render, this);
		},

		render: function() {
			console.log("MenuItemView - Render");
			var self = this;

			this.$el.empty().append(this.template({
				value: self.model
			}));

			if (this.model.get("selected")) {
				this.renderSelected();
			} else {
				this.renderUnselected();
 			}

			return this;
		},

		renderSelected: function() {
			console.log("MenuItemView - RenderSelected");
			this.$el.addClass("selected");
		},

		renderUnselected: function() {
			console.log("MenuItemView - RenderUnselected");
			this.$el.removeClass("selected");
		}
	});
});